<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>

		<p>
			今天天气不错, 挺风和日丽的.
		</p>
		<!-- 
			p: 段落标签
			strong: 强调文本的重要性, 字体样式加粗
			em: 强调文本, 字体样式倾斜
		
		 -->
		<p>
			欢迎大家来到<strong>青云学校</strong>, 跟着歪哥学习<em>HTML</em>, <em>CSS</em>, <em>JavaScript</em>, <em>PHP</em>.
		</p>
		
		<!-- 
			br: 换行
		 -->
		<p>
			汉语六级听力测试<br>
			小明对小刚说: "下午有书法课, 我们需要带笔吗?"<br>
			小刚说: "带毛笔啊!"<br>
			问: "小刚会不会带笔, 如果带, 带什么笔?"
		</p>
		
		<!-- 
			code: 一般里面写一些代码, 或者数学公式等
			sup: 上标
			sub: 下标

		 -->
		<code>
			x<sup>2</sup> + y<sup>2</sup> = z;<br>
			x<sub>2</sub> + y<sub>2</sub> = z;
		</code>

		<!-- 
			q: 引用别人一句话
		 -->
		<p>
			        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;子曰: <q>学而不思则罔, 思而不学则殆</q>.
		</p>
		<!-- 
			&nbsp; 代表空格
			&lt; 代表<
			&gt; 代表>
		 -->
		&lt;p&gt;我是p标签&lt;/p&gt;

		<!-- 
			有序列表
		 -->
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>🥒</li>
		</ol>

		<ul>
			<li>我是第1个li</li>
			<li>我是第2个li</li>
			<li>我是第3个li</li>
		</ul>

		<ul id="book">
			<li>
				西游记
				<ul>
					<li>第一章: 猴王出世</li>
					<li>第二章: 拜师学习</li>
					<li>第三章: 大闹天宫</li>
				</ul>
			</li>
			<li>红楼梦</li>
			<li>水浒传</li>
			<li>三国演义</li>
		</ul>
		
		<dl>
			<dt>黄瓜</dt>
			<dd>可以吃, 还可以美容.</dd>
		</dl>
		
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		
		<!-- 回到顶部 -->
		<a href="#">回到顶部</a>
		<!-- 设置锚点 -->
		<a href="#book">四大名著</a>
		<a href="img.zip">下载美女图片</a>
		
		<!-- 
			alt: 当图片因为某种原因无法正常显示的时候出现的替换文本
			title: 当鼠标悬浮在图片上方时显示的提示信息
		 -->
		<img src="img/girl1.jpg" alt="图片加载失败" title="这是一张美女图片">
		
	</body>
</html>